import React, { useState, useCallback } from "react";
import ReactDOM from "react-dom";
import $axios from '@/plugins/request'
import * as echarts from 'echarts';
import { useEffect } from "react";
import { Card } from 'antd';
function Home() {
  const [user, setUser] = useState([])
  const [names, setNames] = useState([])
  const [values, setValues] = useState([])
  const getUser = useCallback(async () => {
    const { data } = await $axios.get("/api/users/getData")
    // console.log("data", data);
    setUser(data.data)
  }, [])
  const getdangyuan = useCallback(async () => {
    const { data: { data } } = await $axios.get("/api/party/getData")
    let n = [];
    let v = [];
    data.forEach((item) => {
      n.push(item.name)
      v.push(item.value)
    })

    setNames(n)
    setValues(v)
  }, [])
  useEffect(() => {
    getUser()
    getdangyuan()
  }, [])
  useEffect(() => {
    let myChart = echarts.init(document.getElementById('echar'));
    myChart.setOption({
      type: 'pie',
      tooltip: { trigger: 'item' },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      radius: '50%',
      series: [
        {
          name: name,
          type: 'pie',
          radius: '50%',
          data: user,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    });

  }, [user])
  useEffect(() => {
    let myChart = echarts.init(document.getElementById('main'));
    myChart.setOption({
      xAxis: {
        type: 'category',
        data: names
      },
      yAxis: {
        type: 'value'
      },
      tooltip: { trigger: 'item' },
      series: [
        {
          data: values,
          type: 'bar'
        }
      ]
    });
  }, [names, values])
  return (
    <div style={{ display: "flex" }}>
      <Card title="用户权限" style={{ width: "35%", marginRight: 50 }}>
        <div id="echar" style={{ width: 450, height: 400 }}></div>
      </Card>
      <Card title="党员支部分布图表" >
        <div id="main" style={{ width: 700, height: 400 }}></div>
      </Card>
    </div>

  )
}
export default Home